<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			width: 500px;
			height: 200px;
			background-color: skyblue;
			display: grid;
			/* auto-fill 自动填充是根据容器尺寸，自动设置单元格尺寸 */
			/* 在容器宽/高 够大的时候，如果有多的子项，会自动添加一个新的网格，继续往后面加行/列 */
			grid-template-rows: 100px;
			grid-template-columns: repeat(auto-fill, 100px);
		}
	</style>
</head>

<body>
	<div class="container">
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>01</div>
		<div>02</div>
		<div>03</div>
		<div>01</div>
		<div>02</div>
		<div>03</div>
	</div>

	<script>
		const container = document.querySelector('.container')
		divs = container.querySelectorAll('div')

		const colorMap = ['#9b59b6', '#8e44ad', '#2980b9', '#1abc9c', '#2ecc71', '#3498db', '#2c3e50', '#e67e22', '#f39c12']
		divs.forEach((div, index) => div.style.backgroundColor = colorMap[index])
	</script>
</body>

</html>